<template>
<div style="padding:20px; border: 1px solid #eee;border-radius: 10px;">
  <div class="div-main">
    <div class="div-main-s">
      <span class="span-title">营销玩法一</span>
      <span class="span-title2">人气活动，提供下单转化率</span>
    </div>
    <div class="div-display">
      <div class="div-col"  @click="jumpFun(6)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/seckill.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >秒杀</a>
            <!--
              <svg-icon class="svg-icon-s" icon-class="xiaochengxu"/>
             -->
          </div>
          <div class="div-svg-desc">快速抢购引导顾客更多消费</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(7)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/limittime.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >限时</a>
          </div>
          <div class="div-svg-desc">设置商品限时打折促销</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(8)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/group.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >团购</a>
          </div>
          <div class="div-svg-desc">引导客户邀请朋友一起拼团购买</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(10)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/packages.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg" >
            <a href="javascript:void(0);" >套餐</a>
          </div>
          <div class="div-svg-desc">创建商品套餐让客户购买</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(17)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/packages.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg" >
            <a href="javascript:void(0);" >充值套餐</a>
          </div>
          <div class="div-svg-desc">创建充值套餐让客户购买</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(11)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/score.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg" >
            <a href="javascript:void(0);" >积分兑换</a>
          </div>
          <div class="div-svg-desc">积分兑换商品</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(9)" >
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/free.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);">新人免费领</a>
          </div>
          <div class="div-svg-desc">新客成交神器，促进新客完成首次购买，快速提升订单。</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(12)" >
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/join.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);">活动参与数据</a>
          </div>
          <div class="div-svg-desc">活动参与数据</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(14)" >
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/lotteryDetail.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);">中奖明细</a>
          </div>
          <div class="div-svg-desc">向客户发放店铺优惠券</div>
        </div>
      </div>

    </div>
  </div>

  <div class="div-main">
    <div class="div-main-s">
      <span class="span-title">营销玩法二</span>
      <span class="span-title2">粉丝互动，提高下转化率</span>
    </div>
    <div class="div-display">
      <div class="div-col"  @click="jumpFun(3)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/coupon.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >优惠券</a>
          </div>
          <div class="div-svg-desc">向客户发放店铺优惠券</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(4)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/couponDetail.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >优惠券领取列表</a>
          </div>
          <div class="div-svg-desc">优惠券领取列表</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(5)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/bargain.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >砍价</a>
          </div>
          <div class="div-svg-desc">邀请好友砍价后低价购买</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(13)" >
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/lottery.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);">抽奖</a>
          </div>
          <div class="div-svg-desc">向客户发放店铺优惠券</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(15)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/live.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);" >直播带货</a>
          </div>
          <div class="div-svg-desc">商品直播，轻松提高下单转化率</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(1)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/gift.png" alt="">
        </div>
        <div class="divBox" >
          <div class="div-svg">
            <a href="javascript:void(0);" >赠品</a>
          </div>
          <div class="div-svg-desc">设置赠品，回馈客户</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(2)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/giftDetail.png" alt="">
        </div>
        <div  class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);"  >赠品领取列表</a>
          </div>
          <div class="div-svg-desc">赠品领取列表</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(16)">
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/cardCoupon.png" alt="">
        </div>
        <div  class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);"  >礼品卡券</a>
          </div>
          <div class="div-svg-desc">向客户发放礼品卡</div>
        </div>
      </div>

      <div class="div-col" @click="jumpFun(12)" >
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/join.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);">活动参与数据</a>
          </div>
          <div class="div-svg-desc">活动参与数据</div>
        </div>
      </div>

      <div class="div-col"  @click="jumpFun(14)" >
        <div class="div-img">
          <img style="width:100%;height:100%;border-radius: 6px;" src="../../assets/images/lotteryDetail.png" alt="">
        </div>
        <div class="divBox">
          <div class="div-svg">
            <a href="javascript:void(0);">中奖明细</a>
          </div>
          <div class="div-svg-desc">向客户发放店铺优惠券</div>
        </div>
      </div>

    </div>
  </div>

  <!-- <div class="div-main">
    <div class="div-main-s">
      <span class="span-title">营销玩法三</span>
      <span class="span-title2">吸粉、老客带新客，提高下单转化率</span>
    </div>
    <div class="div-display">

    </div>
  </div>

  <div class="div-main">
    <div class="div-main-s">
      <span class="span-title">营销玩法四</span>
      <span class="span-title2">吸粉、老客带新客，提高下单转化率</span>
    </div>
    <div class="div-display">

    </div>
  </div> -->


  </div>
</template>

<script>

export default{

  data(){
    return {

    };
  },
  created(){
  },
  methods : {
    jumpFun(v){
      let path = "";
      switch (v){
        case 1:
          path = "/activity/gift";
          break;
        case 2:
          path = "/activity/giftDetail";
          break;
        case 3:
          path = "/activity/coupon";
          break;
        case 4:
          path = "/activity/couponDetail";
          break;
        case 5:
          path = "/activity/bargain";
          break;
        case 6:
          path = "/activity/seckill";
          break;
        case 7:
          path = "/activity/limittime";
          break;
        case 8:
          path = "/activity/group";
          break;
        case 9:
          path = "/activity/free";
          break;
        case 10:
          path = "/activity/packages";
          break;
        case 11:
          path = "/activity/score";
          break;
        case 12:
          path = "/activity/join";
          break;
        case 13:
          path = "/activity/lottery";
          break;
        case 14:
          path = "/activity/lotteryPrize";
          break;
        case 15:
          path = "/activity/broadcast/info";
          break;
        case 16:
          path = "/activity/Card/batch";
          break;
        case 17:
          path = "/activity/recharge";
          break;
      }
      this.$router.push({
        path:path
      });

    }
  }

};
</script>

<style lang="scss" scoped>
.div-main{
  width:100%;
  height:100%;
  padding:20px;
  background:#fff;
  border-radius: 6px;
}
.div-main-s{
  margin-bottom:20px;
}
.span-title{
  font-size:14px;color:#323233;
}
.span-title2{
  font-size:12px;color:#969799;margin-left:10px;
}
.div-svg{
  font-size:12px;margin-left:10px;
}
.div-svg-desc{
  font-size:12px;margin-left:10px;color:#999;
  margin-top: 4px;
}
.svg-icon-s{
  width: 15px; height: 15px;margin-left:5px;
}
.div-col{
  width:400px;height:72px;background: #f7f8fa;border-radius: 5px;padding: 16px;margin-right:50px;cursor:pointer;display: inline-block;margin-bottom: 20px;
}
.div-img{
  width:40px;
  height:40px;
  display: inline-block;
}

.divBox {
  display: inline-block;
  position: relative;
  bottom: 4px;
}

</style>
